<template>
  <div class="app-main-container">
    <div class="app-main-title">支付参数配置</div>
    <el-tabs v-model="activeTab" @tab-click="getConfig">
      <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name">
        <el-form style="max-width: 600px" :model="list" label-width="160px">
          <el-form-item v-for="item in list" :key="item.id" :label="item.name">
            <el-input v-model="item.value" />
          </el-form-item>
          <el-form-item>
            <el-button v-preventReClick type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { configList, configUpdateForPayParams } from '@/api'
export default {
  data() {
    return {
      tabs: [
        { label: '微信支付', name: '1' },
        { label: '支付宝支付', name: '2' }
      ],
      list: [],
      activeTab: '1'
    }
  },
  created() {
    this.getConfig()
  },
  methods: {
    // 获取配置项
    getConfig() {
      // 会员充值配置
      configList({ param: { type: '8', payType: this.activeTab }}).then(res => {
        this.list = res.recordList
      })
    },
    // 保存修改
    onSubmit() {
      configUpdateForPayParams({ param: { paramList: this.list }}).then(res => {
        this.$message.success('保存成功')
      })
    }
  }
}
</script>
